<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<%@ page info="This in index.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>后台首页</title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/toastr.min.css" media="all">
		<style>
		</style>
	</head>
	<body class="layui-layout-body">
		
		<div class="layui-layout layui-layout-admin">
			  <div class="layui-header">
			    	<div class="layui-logo">点餐云系统</div>
			    
				    <ul class="layui-nav layui-layout-right">
				        <li class="layui-nav-item">
				            <a href="javascript:;">
				                <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
				              admin
				            </a>
				            <dl class="layui-nav-child">
				                <dd><a href="">个人信息</a></dd>
				                <dd><a href="">切换账号</a></dd>
				            </dl>
				        </li>
				        <li class="layui-nav-item"><a href="" class="box">下班 溜溜球</a></li>
				    </ul>
			  </div>
			  
			  <div class="layui-side layui-bg-black">
			        <div class="layui-side-scroll">
			            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			            <ul class="layui-nav layui-nav-tree" lay-filter="test">
			                <li class="layui-nav-item layui-nav-itemed">
			                    <a class="" href="javascript:;">菜品管理</a>
			                    <dl class="layui-nav-child">
			                        <dd><a href="javascript:;" data-id="1" data-title="全部菜品" data-url="food.jsp"
			                               class="site-demo-active" data-type="tabAdd">全部菜品</a></dd>
			                        <dd><a href="javascript:;" data-id="2" data-title="菜品分类" data-url="foodtype.jsp"
			                               class="site-demo-active" data-type="tabAdd">菜品分类</a></dd>
			                    </dl>
			                </li>
		
		            </ul>
		        </div>
		    </div>
		
		
		    <!--tab标签 右侧区域-->
		    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 210px;margin-top: 70px;">
		        <ul class="layui-tab-title"></ul>
		        <div class="layui-tab-content"></div>
		    </div>
		
		
		</div>
		
		
		
		<script src="../js/jquery-3.4.1.js" charset="utf-8"></script>
		<script src="../layui/layui.js" charset="utf-8"></script>
		<script src="../js/toastr.min.js"></script>
		<script src="../js/toastroption.js"></script>
		<script>
			
			// 鼠标悬停
			$(".box").mouseenter(function(){
				$(this).text("退出 系统啦");
				toastr.info("这么早想下班? 菜还没上完啊");
			});
			
			$(".box").mouseleave(function(){
				$(this).text("下班 溜溜球");
			});
			
			 //JavaScript代码区域
			    layui.use(['element', 'layer', 'jquery'], function () {
			    
			        var element = layui.element;
			        var $ = layui.$;
			        // 配置tab实践在下面无法获取到菜单元素
			        $('.site-demo-active').on('click', function () {
					
			            var dataid = $(this);
			            //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
			            if ($(".layui-tab-title li[lay-id]").length <= 0) {
			                //如果比零小，则直接打开新的tab项
			                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
			            } else {
			                //否则判断该tab项是否以及存在
			                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
			                $.each($(".layui-tab-title li[lay-id]"), function () {
			                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
			                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
			                        isData = true;
			                    }
			                })
			                if (isData == false) {
			                    //标志为false 新增一个tab项
			                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
			                }
			            }
			            //最后不管是否新增tab，最后都转到要打开的选项页面上
			            active.tabChange(dataid.attr("data-id"));
			        });
			    
			        var active = {
			            //在这里给active绑定几项事件，后面可通过active调用这些事件
			            tabAdd: function (url, id, name) {
			                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
			                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
			                element.tabAdd('demo', {
			                    title: name,
			                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + 
			                                        url + '" style="width:100%;height:99%;"></iframe>',
			                    id: id //规定好的id
			                })
			                FrameWH();  //计算ifram层的大小
			            },
			            tabChange: function (id) {
			                //切换到指定Tab项
			                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
			            },
			            tabDelete: function (id) {
			                element.tabDelete("demo", id);//删除
			            }
			        };
			    
			        function FrameWH() {
			            var h = $(window).height();
			            $("iframe").css("height", h + "px");
			        }
			    });
			    
			    
		</script>
	</body>
</html>
